<template>
  <div>
    <el-row :gutter="6">
      <el-form
        ref="boxForm"
        :model="boxData"
        :rules="rules"
        size="mini"
        label-width="60px">
        <el-col :lg="24" :md="24">
            <el-row :gutter="0" type="flex" class="flex-wrap">
              <el-col :lg="8" :md="24" style="margin-left:-50px;">
                <el-card  style="height: 100%">
                      <el-row>
                          <el-col :span="10" style="margin-left:60px;">
                            <span class="input-font-size">入库重量(KG)</span>
                            <span style="color:red;font-size:20px;">*</span>
                          </el-col>
                      </el-row>
                      <el-row style="margin-top:10px;">
                      <el-col :span="20" >
                        <el-form-item  prop="instockWeight">
                            <el-input
                            v-model="boxData.instockWeight"
                            placeholder="请称重或输入重量"
                            clearable
                            ref="instockWeight"
                            :style="{ width: '100%' }"
                          >
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row style="margin-top:35px;">
                      <el-col :span="10" style="margin-left:60px;">
                          <span class="input-font-size">长宽高(CM)</span>
                      </el-col>
                    </el-row>
                    <el-row style="margin-top:10px;">
                      <el-col :span="7" style="margin-left:20px;">
                        <el-form-item label="长" prop="length">
                          <el-input
                            v-model="boxData.length"
                            placeholder="长度"
                            clearable
                            ref="length"
                            :style="{ width: '100%' }"
                          >
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="7" style="margin-left:-25px;">
                        <el-form-item label="宽" prop="width">
                          <el-input
                            v-model="boxData.width"
                            placeholder="宽度"
                            clearable
                            ref="width"
                            :style="{ width: '100%' }"
                          >
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="7" style="margin-left:-25px;">
                        <el-form-item label="高" prop="height">
                          <el-input
                            v-model="boxData.height"
                            placeholder="高度"
                            clearable
                            ref="height"
                            :style="{ width: '100%' }"
                          >
                          </el-input>
                        </el-form-item>
                      </el-col>
                          
                    </el-row>
                    <el-row style="margin-top:35px;">
                          <el-col :span="10" style="margin-left:60px;">
                            <span class="input-font-size">六脉单号/追踪号</span>
                            <span style="color:red;font-size:20px;">*</span>
                          </el-col>
                      </el-row>
                      <el-row style="margin-top:10px;">
                      <el-col :span="20" >
                        <el-form-item  prop="orderNo">
                            <el-input
                            v-model="boxData.orderNo"
                            placeholder="请扫描或输入六脉单号/追踪号"
                            clearable
                            @keyup.enter.native="fetchOrderByNo"
                            ref="orderNo"
                            :style="{ width: '100%' }"
                          >
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                </el-card>
              </el-col>
              <el-col :lg="16" :md="24" style="margin-left:-2%">
                <el-card class="margin-bottom" style="height: 100%">
                    <el-row class="line-row-info">
                      <el-col :span="3">
                          <span style="font-weight: bold;font-size:24px;">提示:</span>
                      </el-col>
                      <el-col :span="7">
                            <span style="font-weight: bold;font-size:42px;color:red;">&nbsp;{{boxData.message}}</span>
                      </el-col>
                      <el-col :span="2">
                            <span>&nbsp;</span>
                      </el-col>
                      <el-col :span="4">
                          <span style="font-weight: bold;font-size:24px;">库位:</span>
                      </el-col>
                      <el-col :span="5">
                            <span style="font-weight: bold;font-size:34px;color:red;">A8-1</span>
                      </el-col>
                    </el-row>
                    <el-row class="line-row-info">
                      <el-col :span="3">
                          <span style="font-weight: bold;font-size:24px;">客户备注:</span>
                      </el-col>
                      <el-col :span="7">
                            <span style="font-weight: bold;font-size:24px;">&nbsp;{{boxData.customerRemark}}</span>
                      </el-col>
                      <el-col :span="2">
                            <span>&nbsp;</span>
                      </el-col>
                      <el-col :span="4">
                          <span style="font-weight: bold;font-size:24px;">流向:</span>
                      </el-col>
                      <el-col :span="5">
                            <span style="font-weight: bold;font-size:24px;">{{boxData.flowName}}</span>
                      </el-col>
                    </el-row>  
                    <el-row class="line-row-info"> 
                      <el-col :span="3">
                          <span style="font-weight: bold;font-size:24px;">渠道:</span>
                      </el-col>
                      <el-col :span="7">
                            <span style="font-weight: bold;font-size:24px;">OPPO 澳大利亚专线（带电）</span>
                      </el-col>
                      <el-col :span="2">
                            <span>&nbsp;</span>
                      </el-col>
                      <el-col :span="4">
                          <span style="font-weight: bold;font-size:24px;">实际重量(KG):</span>
                      </el-col>
                      <el-col :span="5">
                            <span style="font-weight: bold;font-size:24px;">&nbsp;{{boxData.inStockActualWeight}}</span>
                      </el-col>
                    </el-row>  
                    <el-row class="line-row-info">
                      <el-col :span="3">
                          <span class="line-font-size">产品:</span>
                      </el-col>
                      <el-col :span="7">
                            <span class="line-font-size">&nbsp;{{boxData.productName}}</span>
                      </el-col>
                      <el-col :span="2">
                            <span>&nbsp;</span>
                      </el-col>
                      <el-col :span="4">
                          <span class="line-font-size">预报重量(KG):</span>
                      </el-col>
                      <el-col :span="5">
                            <span class="line-font-size">&nbsp;{{boxData.weight}}</span>
                      </el-col>
                    </el-row>  
                    <el-row class="line-row-info">
                      <el-col :span="3">
                          <span class="line-font-size">六脉单号:</span>
                      </el-col>
                      <el-col :span="7">
                            <span class="line-font-size">&nbsp;{{boxData.orderNo}}</span>
                      </el-col>
                      <el-col :span="2">
                            <span>&nbsp;</span>
                      </el-col>
                      <el-col :span="4">
                          <span class="line-font-size">客户简称:</span>
                      </el-col>
                      <el-col :span="5">
                            <span class="line-font-size">&nbsp;{{boxData.customerNmae}}</span>
                      </el-col>
                    </el-row> 
                    <el-row class="line-row-info">
                      <el-col :span="3">
                          <span class="line-font-size">追踪号:</span>
                      </el-col>
                      <el-col :span="7">
                            <span class="line-font-size">&nbsp;{{boxData.trackingNo}}</span>
                      </el-col>
                      <el-col :span="2">
                            <span>&nbsp;</span>
                      </el-col>
                      <el-col :span="4">
                          <span class="line-font-size">目的国家:</span>
                      </el-col>
                      <el-col :span="5">
                            <span class="line-font-size">&nbsp;{{boxData.country}}</span>
                      </el-col>
                    </el-row>       
                </el-card>
              </el-col>
            </el-row>
          </el-col>        
          
      </el-form>
    </el-row>
    <el-card style="height: 100%;margin-top:10px;" >
            <div class="line-card-title" style="height:30px;">
              <el-row >
              <el-col :span="12">
                  <span style="font-size:16;margin-left:70%;font-weight: bold;">本次出库历史（刷新后消失）</span>
              </el-col>
            </el-row>
            </div>
            <el-col :span="24">
              <el-table :data="instockData" style="width: 100%">
                <el-table-column prop="sorted" label="序号">
                </el-table-column>
                <el-table-column prop="customerNmae" label="客户名称" >
                </el-table-column>
                <el-table-column prop="orderNo"  label="六脉单号" >
                </el-table-column>
                <el-table-column prop="trackingNo"  label="追踪号" >
                </el-table-column>
                <el-table-column prop="consigneeCountry"  label="目的国" >
                </el-table-column>
                <el-table-column prop="inStockActualWeight"  label="入库实重(KG)" width="120">
                </el-table-column>
                <el-table-column prop="inStockVolume"  label="入库体积(CM³)" width="120">
                </el-table-column>
                <el-table-column prop="inStockChargedWeight"  label="入库计费重(KG)" width="120" >
                </el-table-column>
                <el-table-column prop="inStockTime"  label="入库时间" >
                </el-table-column>
                <el-table-column prop="productName"  label="产品" >
                </el-table-column>
                <el-table-column prop="channel"  label="渠道" >
                </el-table-column>
                <el-table-column prop="storageNo"  label="库位" >
                </el-table-column>
                <el-table-column prop="flowDirection"  label="流向" >
                </el-table-column>
                <el-table-column prop="labelStatus"  label="面单状态" >
                </el-table-column>
                <el-table-column prop="customerRemark"  label="客户备注" >
                </el-table-column>
                <el-table-column prop="inStockType"  label="入库类型" >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope" v-if="scope.row.optResult==='关联成功'">
                    <el-button
                      @click="undoRelevance(scope.row)"
                      type="text"
                      size="small"
                      >撤销</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-card>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span style="font-weight: bold;font-size:24px;">{{dialogMessage}}</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
  </div>
  
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";

export default {
  components: {},
  props: [],
  data() {
    return {
      dialogMessage:'',
      dialogVisible:false,
      boxData: {
        message:'',
        instockWeight: '',
        length: '',
        width: '',
        height: '',
        orderNo: "",
        country: "",
        customerNmae:"",
        weight:'',
        flowName:"",
        productName:'',
        inStockActualWeight:'',
        customerRemark:"",
        trackingNo: ""
        
      },
      instockData: [
 //       {
 //          sorted: 0,
 //          orderNo: "",
 //          bagNo: "",
 //          optResult: ''
 //        }
      ],
      
      rules: {
        orderNo: [
          {
            required: true,
            message: "请扫描六脉单号/追踪号",
            trigger: "blur",
          },
        ],
        instockWeight: [
          {
            required: true,
            message: "请称重",
            trigger: "blur",
          },
        ],
        trackNo: [
          {
            required: true,
            message: "请输入追踪号",
            trigger: "blur",
          },
        ]
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    fetchOrderByNo(){
          if(JSON.stringify(this.boxData.orderNo) === "{}" || this.boxData.orderNo.length==null || this.boxData.orderNo.length==0){
            this.dialogMessage = '请扫描六脉单号/追踪号!'
            this.dialogVisible = true
            return 
          }
          var data = {}
          data["trackingNo"] = this.boxData.orderNo
          ajax("fetchOrderByNo",data).then(res => {
            console.log(res);
            if (res.code != 200) {
              this.dialogMessage = res.message
              this.dialogVisible = true
              this.boxData.message = res.message;
            
            }else{
              this.boxData = res.data
              this.boxData.orderNo = ""
              this.boxData.bagNo = ""
              this.instockData =[]
              this.$nextTick(_ => {
                  this.$refs.orderNo.$refs.input.focus();
              });
            }
          },
          error => {
            console.log(error);
          }
        );
    },
    //获取焦点
    submitForm(){

    },
    nextInput(ref) {
      this.$refs[ref].focus();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style>
.line-card-title {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: rgba(210, 210, 207, 0.64);
  color: #1e201f96;
}
.line-row-info {
  margin-top: 2%;
}
.line-font-size {
  font-size: 24px;
}
.input-font-size{
  font-weight: bold;
  font-size: 16px;
}
</style>
